<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <span>{{msg}}</span>
        <p v-red="msg"></p>
        <!-- <p v-red="title"></p> -->
        <button  @click="change">改变</button>
        <br>
        <input type="text" v-focus>
        <br>
        <!-- <input type="text" v-focustext="str"> -->
        <!-- <span v-lybind:src="msg"></span> -->
        <img v-lybind:src="src" alt=""><button @click="changeImg">改变图片</button>
    </div>
</body>
<script src="../libs/vue3.js"></script>
<script>

    const { createApp, reactive, ref } = Vue;

    const app = createApp({
        setup() {
            // const msg = reactive({name:"admin"});
            const msg = ref("hello");
            const title = ref("哈哈哈");
            const str = ref("你好");
            const arg = ref("title");
            const src = ref("https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_e835568.png");
            const change = ()=>{
                msg.value = "world"
                title.value = "嘿嘿嘿"
                str.value = "hi"
            }
            const changeImg = ()=>{
                src.value = "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1657213200&t=ec2ead1bf39998a3eaf6623b8a44941e"
            }
            return {
                msg, title, change, str, arg, src, changeImg
            }
        }
    });

    app.directive("red", (element, data)=>{
        // 在此处实现自定义指令的功能，此处全部都是原生js操作
        element.innerHTML = data.value;
        element.style.color = "red";
    })

    app.directive("focus", (element, data)=>{
        // 获取焦点
        element.focus()
        // 失去焦点
        // element.blur()
    })

    app.directive("lybind", (element, data)=>{
        console.log(data);
        element[data.arg] = data.value
    })

    // app.directive("focustext", {
    //     // 指令的生命周期钩子函数
    //     created(element, data){
    //         console.log("指令被创建");
    //         console.log(element, data);
    //         element.value = data.value;
    //     },
    //     beforeMount(element, data) {
    //         console.log("指令所在的元素被挂载之前")
    //         console.log(element, data);
    //     },
    //     mounted(element, data) {
    //         console.log("指令所在的元素被挂载之后")
    //         console.log(element, data);
    //         element.focus();
    //     },
    //     beforeUpdate(element, data){
    //         console.log("指令所在的元素所在的组件的虚拟DOM更新之前")
    //         console.log(element, data);
    //     },
    //     updated(element, data) {
    //         console.log("指令所在的元素所在的组件的虚拟DOM更新之后")
    //         console.log(element, data);
    //     },
    //     beforeUnmount(element, data) {
    //         console.log("指令卸载之前")
    //         console.log(element, data);
    //     },
    //     unmounted(element, data) {
    //         console.log("指令卸载之后")
    //         console.log(element, data);
    //     }
    // })



    // 自定义指令实现：v-model的功能
    // 自定义指令内的功能，全部都是原生操作，不能使用vue

    app.mount("#app");

</script>
</html>